<template>
  <div class="donate-hand" title="点进来瞅瞅呢~" @click="moneyDialog"></div>
  <Dialog
    v-model:visible="visible"
    :title="title"
    @close="() => moneyDialog(false)"
  >
    <h2>开源不易，谢谢您嘞</h2>
    <div>
      <img :src="vxImg"/>
      <img :src="zfbImg"/>      
    </div>
    <article>
      有任何问题都可以发送邮件至lindadayo@foxmail.com，csdn：林大大哟，或者gitee：lin_peng118 联系我
    </article>
  </Dialog>
</template>
<script setup>
import { ref } from 'vue';
import Dialog from '../dialog/index.vue';
import vxImg from './imgs/vx.png';
import zfbImg from './imgs/zfb.png';
const title = ref('人道主义关怀');
const visible = ref(false);
const moneyDialog = (status = true) => {
  visible.value = status
}
</script>
<style>
.donate-hand {
  position: relative;
  width: 45px;
  height: 37px;
  cursor: pointer;
}

.donate-hand:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  background: #ffb8b8;
  border-radius: 15px;
  bottom: 0;
  left: 15px;
}

.donate-hand:after {
  content: "❤";
  position: absolute;
  color: #ff4757;
  font-size: 20px;
  top: 10px;
  left: 20px;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
h2 {
  text-align: center;
  font-size: 24px;
}
img {
  width: 45%;
  margin: 0 2%;
}
</style>